<template>
  <div class="loading-overall"
       v-if="show">
    <van-overlay :show="show">
      <div class="wrapper"
           @click.stop>
        <van-loading color="#ffffff"
                     size="38"></van-loading>
        <span class="loading-text">{{ option.text }}</span>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  props: {
    show: {
      type: Boolean
    },
    option: {
      type: Object
    }
  },
  components: {},
  created () { },
  methods: {}
}

</script>

<style lang='scss' scoped>
.loading-overall {
  @include wh100;
  .van-overlay {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 1rem;
    height: 1rem;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0.15rem;
    position: relative;
    .loading-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #ffffff;
      font-size: 0.28rem;
    }
  }
}
</style>